攒了一波OpenGL ES 效果– 多种特效shader ！

作者：再好一点点 链接：https://www.jianshu.com/p/78ed7607cd63

时隔一个月，今天积攒了不少效果，一次性全放出来。先上图为敬

先来一个波浪特效

再来一大波特效

由于gif不可超过10M，所以压缩了一下。

跟随鼠标画圆

接下来逐个介绍这些特效是怎么渲染出来的，因为只是使用到shader所以我使用了VS Code作为编写工具。然后安装一个叫做glsl-canvas还有Shader Language的插件，这样写的shader语法就会高亮，并且可以实时查看渲染效果。

先说第一个波浪特效。

这个其实很简单主要就是运用正弦函数完成的，然后根据时间不停地动态修改初相就行了。完整shader如下（含具体介绍）：

#ifdef GL_ES
precision mediump float;
#endif

uniform sampler2D u_texture_0;//纹理图片
uniform vec2 u_resolution; //画布分辨率
uniform float u_time; //默认的时间，动态改变
uniform int axis; //旋转轴如：X轴 Y轴 Z轴

void main() {
    vec2 vUv = gl_FragCoord.xy / u_resolution.xy;

    // 振幅（控制波浪顶端和底端的高度）
    float amplitude = 0.15;

    // 角速度（控制波浪的周期）
    float angularVelocity = 10.0;

    // 频率（控制波浪移动的速度）
    float frequency = 5.0;

    // 偏距（波浪垂直偏移量）
    float offset = 0.0;

    // 初相位（正值表现为向左移动，负值则表现为向右移动）
    float initialPhase = frequency * u_time;

    // 代入正弦曲线公式计算 y 值
    // y = Asin(ωx ± φt) + k
    float y = amplitude * sin((angularVelocity * vUv.x) + initialPhase) + offset;

    vUv.y += y / 20.0;

    vec4 color = texture2D(u_texture_0, vUv);

    gl_FragColor = color;
}

然后介绍一下羽化效果（从左向右羽化显示）

羽化其实就是根据时间从一个方向向另一个方向逐渐显示渲染的画面的过程，gradualLen表示透明度有变化部分的宽度（如果是上下羽化则表示高度）。为了不使最终颜色被修改需要记录原始颜色的float a = color.a，因为有的像素点本来的alpha就小于1。

vec2 vUv = gl_FragCoord.xy / u_resolution.xy;
vec2 st = gl_FragCoord.xy/u_resolution;
vec4 color = texture2D(u_texture_3, st);

//控制需要做动画的位置
float uX = 0.3;
float uY = 0.5;
float uWidth = 0.6;
float uHeight = 0.05;

    //从左到右羽化擦开
    float gradualLen = 0.2;
    float time = u_time / 4.0;
    float startX = uX + uWidth * time - gradualLen;
    float a = color.a;
    if (st.x > uX && st.x < uX + uWidth && st.y > uY && st.y < uY + uHeight) {
        if (st.x > startX) {
            color.a = 0.0;
            if (st.x < startX + gradualLen) {
                float tempA = 1.0 - (st.x - startX) / gradualLen;
                color.a = tempA;
                if (tempA > a) {
                    color.a = a;
                }
            }
        }
    } else {
        color.a = 0.0;
    }

从一个方向向另一个方向逐渐展开

这个和羽化差不多，比羽化简单一些，不需要计算渐变alpha区域，直接根据时间来确定像素的alpha是否为0。

vec2 vUv = gl_FragCoord.xy / u_resolution.xy;
vec2 st = gl_FragCoord.xy/u_resolution;
vec4 color = texture2D(u_texture_3, st);

//控制需要做动画的位置
float uX = 0.3;
float uY = 0.5;
float uWidth = 0.6;
float uHeight = 0.05;
    
    //从左到右显示
    float uTime = u_time / 2.0;
    if (st.x > uX && st.x < uX + uWidth && st.y > uY && st.y < uY + uHeight) {
        if (st.x > uX && st.x < uX + uWidth * uTime) {
            color.a = color.a;
        } else {
            color.a = .0;
        }
    } else {
        color.a = 0.0;
    }

从左下角向右上角逐渐显示

这个效果稍微麻烦一点，因为需要根据时间计算当前像素点是否在某一个三角区域，这个时候可以使用“点积”和“叉积”来进行计算。cross叉积计算某个点到某条线的距离，dot点积计算当前像素点是否在某条线上。

// 计算某一点到某条线的距离，涵盖两个端点
float seg_distance(vec2 uv, vec2 origin, vec2 mouse) {
    vec3 ab = vec3(mouse-origin, 0);
    vec3 p = vec3(uv-origin, 0);
    float l = length(ab);
    float d = cross(p, normalize(ab)).z;
    float proj = dot(p, ab) / l;
    if (proj >= 0.0 && proj <= l) return d;
    return min(distance(uv, origin), distance(uv, mouse));
}

    vec2 vUv = gl_FragCoord.xy / u_resolution.xy;
    vec2 st = gl_FragCoord.xy/u_resolution;
    vec4 color = texture2D(u_texture_3, st);
 
    //控制需要做动画的位置
    float uX = 0.3;
    float uY = 0.5;
    float uWidth = 0.6;
    float uHeight = 0.05;
  
        // 左下角到右上角带蒙版
        vec2 origin = vec2(u_time, 0);
        vec2 mouse = vec2(0.0, u_time);
        float d = seg_distance(vUv, origin, mouse);
        if (d > 0.) {
            color.a = u_time / 2.0;
        }

逐渐显示

这个就简单的，根据时间来设置像素的alpha，时间是归一化的0-1，刚好满足需求。

模糊效果

主要就是通过计算需要显示像素周围像素的颜色，计算最终该像素的颜色。float tex_offset = 1.0 / 512.0;的值影响模糊程度。

  vec2 vUv = gl_FragCoord.xy / u_resolution.xy;
    vec4 color = texture2D(u_texture_0, vUv);

    float weight[5];
    weight[0] = 0.227027;
    weight[1] = 0.1945946;
    weight[2] = 0.1216216;
    weight[3] = 0.054054;
    weight[4] = 0.016216;

    float tex_offset = 1.0 / 512.0;

    vec3 result = color.rgb;
    result *= weight[0];
    for (int i = 1; i < 5; ++i) {
        float f = float(i);
        if (axis == 0) {
            result += texture2D(u_texture_0, vUv + vec2(tex_offset * f, 0.0)).rgb * weight[i];
            result += texture2D(u_texture_0, vUv - vec2(tex_offset * f, 0.0)).rgb * weight[i];
        } else {
            result += texture2D(u_texture_0, vUv + vec2(0.0, tex_offset * f)).rgb * weight[i];
            result += texture2D(u_texture_0, vUv - vec2(0.0, tex_offset * f)).rgb * weight[i];

        }
    }
    gl_FragColor.rgb = result.rgb;
    gl_FragColor.a = color.a;

影院开幕

根据时间设置左右两侧需要显示像素点的alpha，可设置两边时间不一样，也就是画面展开的时候左右两侧是不一样的速度。

vec2 vUv = gl_FragCoord.xy / u_resolution.xy;
vec2 st = gl_FragCoord.xy/u_resolution;
vec4 color = texture2D(u_texture_3, st);

//控制需要做动画的位置
float uX = 0.3;
float uY = 0.5;
float uWidth = 0.6;
float uHeight = 0.05;
    
    // 开幕
    float leftTime = u_time / 2.0;
    float rightTime = u_time / 4.0;
    float width = uWidth / 2.0;
    float centerX = uX + uWidth / 2.0;
    float startL = centerX - width * leftTime;
    float startR = centerX + width * rightTime;
    if (st.x > uX && st.x < uX + uWidth && st.y > uY && st.y < uY + uHeight) {
        if (st.x < startL && st.x < centerX) {
            color.a = 0.0;
        } 
        if (st.x > startR && st.x > centerX) {
            color.a = 0.0;
        }             
    } else {
        color.a = 0.0;
    }

溶解效果

思路主要是使用一张噪声图，然后根据噪声图某一种颜色来区分是否显示原图的像素点，因为颜色存在过度区域，根据过度区域设置不同的颜色就可以完成冰块融化或者是燃烧的效果。

本例使用的是噪声图的r值小于某一个值时就设置像素透明度为0

vec2 vUv = gl_FragCoord.xy / u_resolution.xy;
vec2 st = gl_FragCoord.xy/u_resolution;
vec4 color = texture2D(u_texture_3, st);

//控制需要做动画的位置
float uX = 0.3;
float uY = 0.5;
float uWidth = 0.6;
float uHeight = 0.05;

if (st.x > uX && st.x < uX + uWidth && st.y > uY && st.y < uY + uHeight) {
        vec4 zaodianColor = texture2D(u_texture_2, st);
        float time = u_time / 2.0;
        float position  = time - 0.8;
        // 溶解
        if (zaodianColor.r < time) {
            color.a = 0.0;
        }            
    } else {
        color.a = 0.0;
    }

燃烧效果

燃烧和溶解差不多，唯一的区别就是在某些像素快要消失的时候获取将要消失像素旁边的像素，然后将旁边的像素修改成不同的颜色，比如修改成火苗的颜色就变成了燃烧的效果。如下设置了两层颜色，当然也可以设置更多的颜色来表示更加逼真的效果。

vec2 vUv = gl_FragCoord.xy / u_resolution.xy;
vec2 st = gl_FragCoord.xy/u_resolution;
vec4 color = texture2D(u_texture_3, st);

//控制需要做动画的位置
float uX = 0.3;
float uY = 0.5;
float uWidth = 0.6;
float uHeight = 0.05;

if (st.x > uX && st.x < uX + uWidth && st.y > uY && st.y < uY + uHeight) {
        vec4 zaodianColor = texture2D(u_texture_2, st);
        float time = u_time / 2.0;
        float position  = time - 0.8;
        mat3 mvpMatric = mvpMatric(vec2(-position / 4.0));
        // 溶解
        if (zaodianColor.r < time) {
            color.a = 0.0;

        } else {
            if (zaodianColor.r < time + 0.09) {
                if (zaodianColor.r < time + 0.05) {
                color.rgb = vec3(0.685, 0.137, 0.094);
                } else {
                color.rgb = vec3(1.0, 0.9, 0.34);
                }
            }
        }              
    } else {
        color.a = 0.0;
    }  

跟随鼠标画圆

思路就是根据鼠标的位置计算原点、圆的起始位置点、鼠标位置三个点来计算像素是否需要显示。本例中使用的是远点（0.5,0.5）、（0.5,1）和动态鼠标位置三个点作为计算的三角形。如果获取到的点在三角形内就显示，在外就不显示。

if (mouse.x > 0.5) 是用来区分鼠标是在圆点的左边部分还是右边部分，因为在两端计算出来的结果是一个正直一个负值，所以需要区分。

原点位置可以为任意位置，不需要是圆心。

#ifdef GL_ES
precision mediump float;
#endif

uniform sampler2D u_texture_0; //纹理图片
uniform vec2 u_resolution; //画布分辨率
uniform float u_time; //时间全局变量，动态改变
uniform int axis; //旋转轴如：X轴 Y轴 Z轴

float seg_distance(vec2 uv, vec2 origin, vec2 mouse) {
    vec3 ab = vec3(mouse-origin, 0);
    vec3 p = vec3(uv-origin, 0);
    float l = length(ab);
    float d = cross(p, normalize(ab)).z;
    return d;
}

float drawCircle(vec2 p, vec2 offset, float r) 
{
    return length(p-offset)-r;
}

const float PI = 3.14159265359;

void main() {

    vec2 vUv = gl_FragCoord.xy / u_resolution.xy;
    vec2 origin = vec2(0.5, 0.5);    

    float time = u_time * 2.0;
    float x = sin(time);
    float y = cos(time);
    vec2 mouse = vec2(x, y);
    
    vec2 pt1 = vec2(0.5, 1.0);

    float d = seg_distance(vUv, origin, pt1);
    float d1 = seg_distance(vUv, origin, mouse);
    
    gl_FragColor.a = 0.0;
    if (mouse.x > 0.5) {
        if ((d > 0.0 && d1 < 0.0)) {
            gl_FragColor.a = 1.0;
        }
    } else {
        if ((d > 0.0 || d1 < 0.0)) {
            gl_FragColor.a = 1.0;
        }
    }

    float d2 = drawCircle(vUv, vec2(0.5,0.5), 0.0);
    vec3 color = vec3(1.0, 1.0, 1.0);
    color *= 0.8 + 0.2 * cos(100.0 * d2);
 
    gl_FragColor.rgb = color;
}

---END---

推荐阅读：

Compose仿豆瓣榜单客户端，了解一下~

Compose仿豆瓣榜单客户端，了解一下~

Android CameraX结合LibYUV和GPUImage自定义相机滤镜

写了个AS插件：SmartNDKStack，快速定位Android Native开发Crash

Android超简单自定义View实现人脸识别动画效果！

MVVM 进阶版：MVI 架构了解一下~

自定义View实战！让你的轮播指示器“粘”起来！

更文不易，点个“在看”支持一下👇